
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Duotone - Music &amp; Band Website Template</title>
<meta name="description" content="Duotone is a Music and Band Website Template created with HTML5, CSS3 and jQuery." />

<script src="/cdn-cgi/apps/head/G7QH0MjiTvIVKi248Nxaf3rr0vY.js"></script><link href="https://fonts.googleapis.com/css?family=Playfair+Display:400,700,900%7CMontserrat:400,500,700" rel="stylesheet" type="text/css">

<link href="css/lib/bootstrap.min.css" rel="stylesheet">

<link href="css/plugins/plugins-combined.css" rel="stylesheet">

<link href="css/style.css" rel="stylesheet">
<!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
<script src="js/lib/modernizr-min.js"></script>

<script>
    ! function(f, b, e, v, n, t, s) {
        if (f.fbq) return;
        n = f.fbq = function() {
            n.callMethod ?
                n.callMethod.apply(n, arguments) : n.queue.push(arguments)
        };
        if (!f._fbq) f._fbq = n;
        n.push = n;
        n.loaded = !0;
        n.version = '2.0';
        n.queue = [];
        t = b.createElement(e);
        t.async = !0;
        t.src = v;
        s = b.getElementsByTagName(e)[0];
        s.parentNode.insertBefore(t, s)
    }(window,
        document, 'script', 'https://connect.facebook.net/en_US/fbevents.js');
    fbq('init', '1530003103982991'); // Insert your pixel ID here.
    fbq('track', 'PageView');
    </script>
<noscript><img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=1530003103982991&ev=PageView&noscript=1" /></noscript>


</head>
<body id="top" class="preload">

<div id="page-loader" class="loading-wrap">
<span class="loading-text">Loading Duotone Website</span>
<div class="loading-bars">
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</div>
</div>


<div class="audio-player">
<a href="javascript:;" class="hide_player"><i class="fa fa-angle-down"></i> HIDE</a>
<div id="jquery_jplayer_1" class="jp-jplayer"></div>


<div id="jp_container_1" class="jp-audio" role="application" aria-label="media player">
<div class="jp-type-playlist">

<div class="jp-gui jp-interface flex-wrap">

<div class="jp-controls flex-item">
<button class="jp-previous" tabindex="0"><i class="fa fa-step-backward"></i></button>
<button class="jp-play" tabindex="0"><i class="fa fa-play"></i></button>
<button class="jp-next" tabindex="0"><i class="fa fa-step-forward"></i></button>
</div>


<div class="jp-progress-container flex-item">

<div class="jp-time-holder">
<span class="jp-current-time" role="timer" aria-label="time">&nbsp;</span>
<span class="jp-duration" role="timer" aria-label="duration">&nbsp;</span>
</div>


<div class="jp-progress">
<div class="jp-seek-bar">
<div class="jp-play-bar">
<div class="bullet">
</div>
</div>
</div>
</div>

</div>


<a href="javascript:void(0);" id="playlist-text">
<div class="jp-now-playing flex-item">
<div class="jp-track-name"></div>
<div class="jp-artist-name"></div>
</div>
</a>


<div class="jp-toggles flex-item">

<button id="playlist-toggle" class="jp-show-playlist" tabindex="0" title="Playlist"><i class="fa fa-music"></i></button>

<button class="jp-shuffle" tabindex="0" title="Shuffle">
<i class="fa fa-random"></i></button>

<button class="jp-repeat" tabindex="0" title="Repeat"><i class="fa fa-exchange"></i></button>
</div>


<div class="jp-volume-controls flex-item">
<button class="jp-mute" tabindex="0"><i class="fa fa-volume-up"></i></button>

<div class="jp-volume-bar">
<div class="jp-volume-bar-value">
<div class="bullet">
</div>
</div>
</div>

</div>

</div>


<div id="playlist-wrap" class="jp-playlist">
<ul>
<li>&nbsp;</li>
</ul>
</div>


<div class="jp-no-solution">
<span>Update Required</span> To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
</div>
</div>

</div>

</div>


<nav class="navbar navbar-default navbar-fixed-top js-on-scroll">
<div class="container">

<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="flaticon-interface"></span>
</button>
<a class="navbar-brand" href="#"><img src="images/logo.png" alt="logo"></a>
</div>

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<div class="menu-trigger">
<a href="#">
<span class="flaticon-interface"></span>
</a>
</div>

</div>

</div>

</nav>

<header class="slider-bg has-parallax" id="slider">
<div class="container">
<div class="row">
<div class="col-md-12 clearfix">
<div class="slider-wrap">
<div class="header-slider">
<div class="header-slide">
<div class="hero-wrap">
<div class="no-overflow">
<div class="hero-block">
<h1 class="hero-title">When music hits you </h1>
<h1 class="hero-text">you feel no pain</h1>
<span class="attr"> &mdash; Bob Marley</span>
</div>
</div>
</div>
</div>

<div class="header-slide">
<div class="hero-wrap">
<div class="no-overflow">
<div class="hero-block">
<h1 class="hero-title hero-title-fit1">Without music, life would</h1>
<h1 class="hero-text"> be a mistake.</h1>
<span class="attr"> &mdash; Friedrich Nietzsche</span>
</div>
</div>
</div>
</div>

<div class="header-slide">
<div class="hero-wrap">
 <div class="no-overflow">
<div class="hero-block">
<h1 class="hero-title hero-title-fit">I can't go a day without</h1>
<h1 class="hero-text"> listening to music</h1>
<span class="attr"> &mdash; Will Grayson</span>
</div>
</div>
</div>
</div>

</div>

</div>
</div>
</div>
</div>
</header>



























<a class="back_to_top" href="#top"> <img src="images/back-to-top.png" alt="Back to top" /> </a>


<script src="js/lib/jquery-1.12.0.min.js"></script>

<script src="js/lib/bootstrap.min.js"></script>

<script src="js/plugins/flexslider-min.js"></script>
<script src="js/plugins/slick.min.js"></script>
<script src="js/plugins/magnific-popup.min.js"></script>
<script src="js/plugins/parallax.js"></script>
<script src="js/plugins/rellax.min.js"></script>
<script src="js/plugins/atvimg.js"></script>
<script src="js/plugins/jquery.jplayer.min.js"></script>
<script src="js/plugins/jplayer.playlist.min.js"></script>
<script src="js/audio-player.js"></script>
<script src="js/validate.js"></script>
<script src="js/contact.js"></script>
<script src="js/subscribe.js"></script>

<script src="js/script.js"></script>
</body>
</html>
